<template>
	<!-- <travelskeleton v-if="isLoading"></travelskeleton>
    v-else="!isLoading" -->
	<view class="bg">
		<!-- 顶部 -->
		<view class="top">
			<img src="../../static/search.png" alt="" class="search" @click="showTravelCondition">
			<input type="text" placeholder="搜索" v-model="inputvalue">
		</view>
		<!-- 选项栏 -->
		<view class="option">
			<view>
				<uni-data-select class="select" v-model="value" :localdata="range" @change="change" :clear="false">
				</uni-data-select>
			</view>
			<view>
				<uni-data-select class="select" v-model="value1" :localdata="range1" @change="change" :clear="false">
				</uni-data-select>
			</view>
			<view>
				<uni-data-select class="select" v-model="value2" :localdata="range2" @change="change" :clear="false">
				</uni-data-select>
			</view>
		</view>
		<!-- 景点展示 -->
		<view class="show">
			<view class="traveldisplay" v-for="(item) in travel" :key="item.travelId" @click="toDetail(item.travelId)">
				<img :src="`${IMG_URL}${item.logo}`" class="travelimg">
				<view class='travelmsg'>
					<text class="name">{{item.name}}</text><br>
					<text class="ip">| {{item.local}}</text>
					<view class="text-container"><text class="text-content">{{item.desc}}</text></view>
				</view>
				<text class="price">￥{{item.price}}</text>
			</view>
			<view v-if="isLoading" class="loading">正在加载...</view>
			<view v-if="noMoreData" class="no-more-data">没有更多数据</view>
		</view>
	</view>
</template>

<script setup>
	import {
		reactive,
		ref
	} from 'vue'
	import {
		http
	} from '../../http.js'
	import {
		IMG_URL
	} from "@/utils/imgStatic"
	import {
		onLoad,
		onReachBottom,
		onPullDownRefresh
	} from '@dcloudio/uni-app'
	import {
		userStore
	} from '../../store/userstore.js'

	const isLoading = ref(false)
	const userstore = userStore()

	const travel = reactive([])

	const value = ref(0)
	const value1 = ref(0)
	const value2 = ref(0)
	const range = reactive([{
			value: 0,
			text: "全部景点"
		},
		{
			value: 1,
			text: "人文古迹"
		},
		{
			value: 2,
			text: "自然风光"
		}
	])
	const range1 = reactive([{
			value: 0,
			text: "综合排序"
		},
		{
			value: 1,
			text: "热销"
		}
	])
	const range2 = reactive([{
			value: 0,
			text: "筛选"
		},
		{
			value: 1,
			text: "5A"
		},
		{
			value: 2,
			text: "4A"
		}
	])

	const total = ref(0)
	const formData = reactive({
		pageSize: 5,
		page: 1
	})
	const noMoreData = ref(false)

	const inputvalue = ref('')
	const getTravel = async () => {
		if (isLoading.value) return; // 如果正在加载，则不执
		isLoading.value = true; // 开始加载  
		const res = await http({
			url: 'http://localhost:3000/travel/getAllTravelByPage',
			method: "GET",
			data: {
				category: '',
				name: '',
				currentPage: formData.page,
				pageSize: formData.pageSize
			}
		})
		if (res.code == 200 && res.msg == 'success') {
			const newlist = res.data.rows;
			if (newlist.length > 0) {
				travel.push(...newlist); // 追加数据  
			} else {
				noMoreData.value = true; // 没有更多数据  
			}
			total.value = res.data.count;
			if (travel.length == total.value) {
				noMoreData.value = true;
			}
		} else {
			console.error('数据请求失败');
		}

		isLoading.value = false; // 结束加载  
	}

	onReachBottom(() => {
		if (isLoading.value || noMoreData.value || formData.page * formData.pageSize >= total.value) return;

		formData.page++;
		getTravel();
	});


	onPullDownRefresh(() => {
		formData.page = 1;
		travel.length = 0; // 清空数据 
		noMoreData.value = false; // 重置没有更多数据状态  
		getTravel();
		setTimeout(() => {
			uni.stopPullDownRefresh();
		}, 1000);
	});

	onLoad(() => {
		getTravel()
	})

	const showTravelCondition = async () => {
		const res = await http({
			url: 'http://localhost:3000/travel/getTravelByCondition',
			method: "POST",
			data: {
				name: inputvalue.value,
			}
		})
		if (res.code == 200 && res.msg == 'success') {
			travel.length = 0
			for (let i = 0; i < res.data.rows.length; i++) {
				travel.push(res.data.rows[i])
			}
			console.log(res, '11111')
		} else {

		}
	}


	// 跳转景点详情页
	const toDetail = async (item) => {
		console.log(item);
		userstore.detailtravelId = item
		uni.navigateTo({
			url: '/pages/travel/detail'
		})
	}

	// 展示骨架屏
	/* onLoad(()=>{
	    
	    setTimeout(()=>{
	        isLoading.value = false
	    },1000)
	    isLoading.value = true
	}) */
</script>
<style scoped>
	.loading {
		text-align: center;
		padding: 20px;
		color: #999;
	}

	.no-more-data {
		text-align: center;
		padding: 20px;
		color: #999;
	}

	.bg {
		background-color: #F5F5F5;
	}

	.top {
		border-radius: 25px;
		background-color: white;
		width: 270px;
		margin-left: 55px;
		height: 30px;
		font-size: 15px;
		display: inline-block;
		margin-top: 5px;
	}

	.top>input {
		border-radius: 25px;
		background-color: white;
		width: 245px;
		height: 30px;
		font-size: 15px;
		display: inline-block;
	}

	.search {
		width: 25px;
		height: 25px;
		display: inline-block;
		margin-bottom: 3px;
	}

	.option {
		background-color: white;
		margin-top: 10px;
		border-bottom: 1px solid #F5F5F5;
		height: 40px;
	}

	.option>label {
		display: inline-block;
		margin: 8px 50px 0px 20px;
	}

	.show {
		background-color: white;
	}

	.traveldisplay {
		margin-left: 10px;
		margin-right: 10px;
		margin-top: 10px;
		height: 110px;
		position: relative;
		border-bottom: 1px solid #F8F8FF;
	}

	.travelimg {
		height: 110px;
		width: 100px;
		border-radius: 15px;
	}

	.travelmsg {
		display: inline-block;
		width: 210px;
		height: 80px;
		margin-left: 8px;
		background-color: #fff;
		position: absolute;
		top: 8px
	}

	.name {
		font-weight: bold;
	}

	.ip {
		font-size: 13px;
		color: darkgray;
	}

	.price {
		color: orangered;
		font-size: 16px;
		font-weight: bold;
		position: absolute;
		bottom: 0;
		right: 0;
	}

	.option>view {
		display: inline-block;
		margin-left: 20px;
		margin-right: 30px;
	}

	.select {
		border: none;
	}
	.text-container {  
	  width: 210px; /* 设置固定宽度 */  
	  height: 40px; /* 设置固定高度 */  
	   font-size: 14px;
	   overflow: hidden; /* 隐藏超出部分 */
	   text-overflow: ellipsis; /* 用省略号表示被截断的文本 */ 
	} 
	.text-content {  
	  width: 100%; /* 继承父容器的宽度 */  
	}
</style>
